<div>
	<yu-panel title="公共参数管理" v-loading="exportLoading">
		<yu-row :gutter="24">
			<yu-col :span="5" class="tree-custom">
				<div class="yu-toolBar">
					<yu-button-group>
						<el-button class="btn" @click="createTreeFn" :disabled="!addClassFnButton">新增</el-button>
						<el-button class="btn" @click="updateTreeFn" :disabled="!updateClassFnButton">修改</el-button>
						<el-button class="btn" @click="deleteTreeFn" :disabled="!deleteClassFnButton">删除</el-button>
					</yu-button-group>
				</div>
				<yu-xtree ref="refTree" :height="height" @node-click="nodeClickFn" :data-url="treeDataUrl" data-id="appCode" data-label="appName"
				 data-pid="parentId" :data-async="async" data-root="0000" icon="iconPath">
				</yu-xtree>
			</yu-col>
			<yu-col :span="19">
				<yu-xform related-table-name="refTable" form-type="search" v-model="searchFormdata">
					<yu-xform-group :column="4">
						<yu-xform-item label="系统名称" placeholder="系统名称" ctype="input" name="appName" :disabled="appNameDisabled"></yu-xform-item>
						<yu-xform-item label="参数分类名称" placeholder="参数分类名称" ctype="input" name="className" :disabled="classNameDisabled"></yu-xform-item>
						<yu-xform-item label="参数名称" placeholder="参数名称" ctype="input" name="paramName"></yu-xform-item>
					</yu-xform-group>
				</yu-xform>
				<yu-toolBar>
					<yu-button @click="addFn" v-if="isNodeLeaf&&addFnButton">新增</yu-button>
					<yu-button @click="modifyFn" v-if="updateFnButton">修改</yu-button>
					<yu-button @click="deleteFn" v-if="deleteFnButton">删除</yu-button>
					<yu-button @click="importFlowFn" v-if="importFnButton">excel导入</yu-button>
					<yu-button @click="exportFlowFn" v-if="exportFnButton">excel导出</yu-button>
				</yu-toolBar>
				<div ref="tableBox" style="overflow: auto;">
					<yu-xtable :height="tbHeight" ref="refTable" row-number :data-url="dataUrl" :pageable="true" selection-type="checkbox">
						<yu-xtable-column label="系统名称" prop="appName" :show-overflow-tooltip="true" v-if="showAppName"></yu-xtable-column>
						<yu-xtable-column label="参数分类名称" prop="className" v-if="showClassName"></yu-xtable-column>
						<yu-xtable-column label="参数名称" prop="paramName" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<a style="text-decoration:underline;color:#636CE4 " href="javascipt:void(0);" @click="viewDataFn(scope.row)">{{ scope.row.paramName }}</a>
							</template>
						</yu-xtable-column>
						<yu-xtable-column label="参数类型" prop="paramType" :options="paramOption"></yu-xtable-column>
						<yu-xtable-column label="参数取值" :show-overflow-tooltip="true">
							<template slot-scope="scope">
								<div class="diandian" v-show="scope.row.paramType==='Q'">{{scope.row.sqlexpression}}</div>
								<div class="diandian" v-show="scope.row.paramType==='C'">{{scope.row.paramValue}}</div>
							</template>
						</yu-xtable-column>
						<yu-xtable-column label="备注" prop="remark" :show-overflow-tooltip="true"></yu-xtable-column>
					</yu-xtable>
				</div>
			</yu-col>
		</yu-row>
	</yu-panel>
	<yu-xdialog :title="viewTitle" :visible.sync="dialogVisible" width="900px">
		<yu-xform ref="refForm" v-model="formdata" :rules="ruleslist" label-width="120px">
			<yu-xform-group>
				<yu-xform-item ctype="input" name="appCode" hidden></yu-xform-item>
				<yu-xform-item ctype="input" name="classCode" hidden></yu-xform-item>
				<yu-xform-item label="所属应用系统" ctype="input" name="appName" rules="required" disabled></yu-xform-item>
				<yu-xform-item label="参数分类名称" ctype="input" name="className" rules="required" disabled></yu-xform-item>
				<yu-xform-item label="参数代码" name="paramCode" maxlength="64" rules="required" :disabled="isReadOnly"></yu-xform-item>
				<yu-xform-item label="参数名称" ctype="input" name="paramName" maxlength="120" rules="required"></yu-xform-item>
				<yu-xform-item label="取值类型" name="paramType" rules="required" :options="paramOption" ctype="select" @change="paramTypeChangeFn"></yu-xform-item>
				<yu-xform-item label="参数长度" ctype="input" name="paramSize" maxlength="100" rules="required" :hidden="sqlQuery"></yu-xform-item>
				<yu-xform-item label="参数值" ctype="input" name="paramValue" maxlength="250" rules="required" :hidden="sqlQuery"></yu-xform-item>
				<yu-xform-item label="数据源" ctype="select" name="dataSource" rules="required" :options="dataSources" :hidden="!sqlQuery"></yu-xform-item>
				<!-- <yu-xform-item label="SQL语句" ctype="textarea" name="sqlexpression" :colspan="24" :rows="3" :hidden="!sqlQuery" ></yu-xform-item> -->
				<div v-if="sqlQuery" style="width: 200%;">
					<div class="el-form-item">
						<label class="el-form-item__label" style="width: 120px;">SQL语句：</label>
						<div style="margin-left: 120px; border: 1px solid #bfcbd9; border-radius: 4px;">
							<yu-ace-editor @change="onchange" :code="formdata.sqlexpression" ref="refeditor" :options="{printMarginColumn: 700, fontSize: 14}" :width="'100%'"
							 :height="'75'"></yu-ace-editor>
						</div>
					</div>
				</div>
				<yu-xform-item label="备注" ctype="textarea" name="remark" maxlength="240" :colspan="24" :rows="3"></yu-xform-item>
			</yu-xform-group>
			<div class="yu-grpButton">
				<yu-button v-show="sqlQuery" type="primary" @click="testConnect">测试SQL</yu-button>
				<yu-button v-show="cancelBtnShow" @click="cancelFn">取消</yu-button>
				<yu-button v-show="saveBtnShow" type="primary" v-if="!isViewFlag" @click="saveFn" :disabled="isViewFlag">保存</yu-button>
				<yu-button v-show="saveBtnShow" type="info" v-if="isViewFlag" @click="saveFn" :disabled="isViewFlag">保存</yu-button>

			</div>
		</yu-xform>
	</yu-xdialog>


	<yu-xdialog :title="viewClassTitle" :visible.sync="classDialogVisible" width="900px">
		<yu-xform ref="refClassForm" v-model="classFormdata" :rules="rules" label-width="120px">
			<yu-xform-group>
				<yu-xform-item label="应用系统编号" ctype="input" name="appCode" :colspan="12" rules="required" disabled></yu-xform-item>
				<yu-xform-item label="应用系统名称" ctype="input" name="appName" :colspan="12" rules="required" disabled></yu-xform-item>
				<yu-xform-item label="参数分类代码" ctype="input" name="classCode" maxlength="64" :colspan="12" rules="required" :disabled="classCodeReadOnly"></yu-xform-item>
				<yu-xform-item label="参数分类名称" ctype="input" name="className" maxlength="120" :colspan="12" rules="required"></yu-xform-item>
				<yu-xform-item label="备注" ctype="textarea" name="remark" maxlength="240" :colspan="24" :rows="3"></yu-xform-item>
			</yu-xform-group>
			<div class="yu-grpButton">
				<yu-button v-show="sqlQuery" type="primary" @click="testConnect">测试SQL</yu-button>
				<yu-button v-show="cancelBtnShow" @click="cancelClassFn">取消</yu-button>
				<yu-button v-show="saveBtnShow" type="primary" @click="saveClassCodeFn">保存</yu-button>
			</div>
		</yu-xform>

	</yu-xdialog>
	
	
	<yu-dialog title="excel导入" :visible.sync="upLoadDialogVisible" width="400px" v-loading="excelloading">
					<yu-upload class="upload-demo" ref="my-upload" :action="upLoadUrl" accept=".xls,.xlsx" :before-upload="checkUpload"
						 :multiple="multipleFalg"	:on-success="successUpload" :file-list="appUploadDatas">
						<yu-button size="small" type="primary">点击上传</yu-button>
						<a slot="tip" class="downloadcss" @click="exportDemo">模板下载</a>
						<div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过100M</div>
					</yu-upload>
					<div class="uplaod-errinfo" v-if="errshow">
						<yu-tag type="danger">上传失败，错误信息如下：</yu-tag>
						<div class="uplaod-errlist">
								<yu-table :data="errdata" highlight-current-row style="width:100%" show-header>
									<yu-table-column type="index"  width="50">
										
									</yu-table-column>
									<yu-table-column prop="errMsg" label="错误信息">
										
									</yu-table-column>
								</yu-table>	
						</div>
					</div>
	</yu-dialog>
	
</div>

<style>
	.downloadcss{
		cursor: pointer;
		margin-left:10px;
	}
	.tree-custom {
		border: 1px solid #d1dbe5;
		margin-top: 10px;
		padding: 0 !important;
	}

	.tree-custom .yu-toolBar {
		padding: 0;
	}

	.tree-custom .yu-toolBar>h2 {
		margin: 0;
		padding: 0;
		padding-left: 15px;
	}

	.tree-custom .el-button-group {
		display: block;
	}

	.tree-custom .el-button-group .el-button {
		border-width: 0;
		border-left-width: 1px;
		border-radius: 0;
		width: 33.3333334%;
	}

	.tree-custom .el-button-group .el-button:first-child {
		border-left-width: 0;
	}

	.tree-custom .el-button-group .el-button:last-child {
		border-right-width: 0;
	}

	.tree-custom .el-tree {
		margin-top: 0;
		margin-right: 0;
		border-width: 0;
		border-top-width: 1px;
	}
	.diandian{
		overflow: hidden;
		word-break: break-all;
		box-sizing: border-box;
		text-overflow: ellipsis;
	}
	.el-tooltip__popper{
		max-width: 800px!important;
		word-break: break-all;
	}
</style>